@page "/blog/how-to-handle-select-with-primitive-and-complex-types"

<Seo Canonical="/blog/how-to-handle-select-with-primitive-and-complex-types" Title="Blazorise Select component with primitive and complex types" Description="In this blog post we will look at how to use Blazorise Select Component to bind both primitive and complex types, the select element's limitations, and how to work around them." ImageUrl="img/blog/2022-06-25/Blazorise-Select-Component.png" />

<BlogPageImage Source="img/blog/2022-06-25/Blazorise-Select-Component.png" Text="How to handle binding of primitive and complex types with Blazorise Select component" />

<BlogPageTitle>
    Using the primitive and complex types with Blazorise Select component
</BlogPageTitle>

<BlogPageParagraph>
    Blazorise's Select component represents a dropdown list and is built upon the standard HTML Select element. See <Anchor To="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select" Title="Link to HTML Select">HTML Select</Anchor>.
</BlogPageParagraph>

<BlogPageParagraph>
    This has the advantage of supporting the standard and semantic way of building a select element and dealing with any limitations the element may have.
</BlogPageParagraph>

<BlogPageParagraph>
    In this blog post we will look at how to use <Anchor To="docs/components/select" Title="Link to Blazorise Select Component">Blazorise Select Component</Anchor> to bind both primitive and complex types, the <Code Tag>select</Code> element's limitations, and how to work around them.
</BlogPageParagraph>

<BlogPageSubtitle>
    What are Primitive and Complex Types?
</BlogPageSubtitle>

<BlogPageParagraph>
    Before we start, we must first cover the differences between what primitive and complex types represent.
</BlogPageParagraph>

<Heading Size="HeadingSize.Is3">
    Primitive Types
</Heading>

<BlogPageParagraph>
    The primitive types are predefined by the language and they are named by reserved keywords. They represent the basic types of the language. In C#, The most famous primitive data types are: <Code>int</Code>, <Code>object</Code>, <Code>short</Code>, <Code>char</Code>, <Code>float</Code>, <Code>double</Code>, <Code>char</Code>, <Code>bool</Code>. They are called primitive because they are the main built-in types, and could be used to build other data types.
</BlogPageParagraph>

<Heading Size="HeadingSize.Is3">
    Complex Types
</Heading>

<BlogPageParagraph>
    The complex types are all built from a combination of primitive types.  Usually, they are represented as a <Code>class</Code> or a <Code>struct</Code> object. So whenever you create a custom class like <Code>Employee</Code>, or <Code>Student</Code> that is a complex type.
</BlogPageParagraph>

<BlogPageSubtitle>
    How to bind Primitive Type?
</BlogPageSubtitle>

<BlogPageParagraph>
    For primitive types it's pretty simple to build the select. Let's go ahead and build a dropdown-list list with four employees, where their value is their employee Id, an int type.
</BlogPageParagraph>

<BlogPageSourceBlock Code="UsingTheSelectComponent_SelectComponentWithPrimitiveTypeExample" />

<BlogPageSubtitle>
    How to bind Enumeration Type?
</BlogPageSubtitle>

<BlogPageParagraph>
    Although still a primitive type, an enumeration type can basically represent two values, the underlying numeric representation and the text definition. This matters because depending on the javascript serialization settings the value might not come back with the expected representation and fail to successfully bind the selected value.
</BlogPageParagraph>

<BlogPageParagraph>
    Here's an example of how to properly handle an enumeration type, by configuring the settings appropriately
</BlogPageParagraph>

<BlogPageSourceBlock Code="UsingTheSelectComponent_SelectComponentWithEnumTypeExample" />

<BlogPageSubtitle>
    How to bind Complex Type?
</BlogPageSubtitle>

<BlogPageParagraph>
    Blazorise doesn't currently support binding a complex type directly because the <Code Tag>select</Code> element has no way of uniquely identifying an item of a complex type, so we have to identify the item ourselves uniquely.
</BlogPageParagraph>

<BlogPageParagraph>
    The main problem with complex types is that no built-in serialization could convert complex type values to a string representation. Remember, a <Code>Select</Code> component working with a native <Code Tag>select</Code> HTML element means that all its <Code Tag>option</Code> elements will in the end contain a string value.
</BlogPageParagraph>

<BlogPageParagraph>
    The easiest and most recommended way to work with complex types is to use one of its fields as a <Code>SelectItem</Code> value.
</BlogPageParagraph>

<BlogPageParagraph>
    Let's look at how a dropdown list with four employees would look, now with actual complex types.
</BlogPageParagraph>

<BlogPageSourceBlock Code="UsingTheSelectComponent_SelectComponentWithComplexTypeExample" />

<BlogPageSubtitle>
    How to bind Null values?
</BlogPageSubtitle>

<BlogPageParagraph>
    Having a null value is a valid option when you want to consider the absense of a value, for example when handling a nullable type like <Code>int?</Code>
</BlogPageParagraph>

<BlogPageParagraph>
    However handling null values with the select element can be tricky, and this has to do with how browsers work in general. When you have an empty value for the option element it will take its text or content and use that for the selected value.
</BlogPageParagraph>

<BlogPageParagraph>
    So the option should be left empty, let's see this in action with a nullable type.
</BlogPageParagraph>

<BlogPageSourceBlock Code="UsingTheSelectComponent_SelectComponentWithNullableTypeExample" />

<BlogPageSubtitle>
    Conclusion
</BlogPageSubtitle>

<BlogPageParagraph>
    Thank you for your time! We just looked at the Blazorise Select component's features and the distinctions between primitive and complex types.
</BlogPageParagraph>

<BlogPageParagraph>
    Download our <Anchor To="https://www.nuget.org/profiles/Megabit" Title="Link to Blazorise NuGet">Blazorise NuGet</Anchor> to try our Blazor components or purchase our <Anchor To="commercial/" Title="Link to commercial Blazorise web">commercial Blazorise web</Anchor> license to gain access to our support forum. To learn more about other available features, please see our online examples and <Anchor To="docs" Title="Link to documentation">documentation</Anchor>.
</BlogPageParagraph>

<BlogPagePostInto UserName="David Moreira" ImageName="david" PostedOn="July 1st, 2022" Read="4 min" />
